Is there a simple way to make a styled tooltip for an <area> in a <map> ? By default the browser seem to render the area text into a yellow text box. But I've got cases where the text should be formatted.
I've been trying with Twitter Bootstrap's tooltips and popover but they're always positioned at the top left of the window. At 0,0.
UPDATE - screenshot and code
Telling to add popovers to the area elements of the piechart. Each <area> corresponds to one section of the pie chart.
$('area').popover({content:"I'm a cut off popover" ,trigger:'hover'});
I'd like to have the popover appear next to the hovered-on section.
I'm aware of comparable questions related to <area> in Stack Overflow. My case however is different in the sense that I don't know upfront the size and positions of the sections. So I can't generate a custom style to set the top and left properties.
The same happens for regular tooltips. They're put into the left upper corner. But I'd rather go for popovers because I need formatted content.
Hope this helps.
Just don't use the title attribute which does this yellowish browser tooltip.
For a custom tooltip, you must use a custom solution (javascript based, obviously). I suggest you use a library (like jQuery) and find a tooltip plugin which does what you want like this one
Update
For the css issue with the bootstrap tooltip, it looks like there is a position issue. Please provide more code so we can figure out what's goin' on.
The answer is that this is a bug in Bootstrap
https://github.com/twitter/bootstrap/issues/5000
Related
I want a popup block to appear when I hover over the image as given in the picture below. How can I achieve this using css.
I have already used css to change the background on hover so how can I make the content appear.
I have been using wordpress but I couldn't find any plugin for the same.
Can anyone help with this one?
Sorry, but you can't do this with only CSS : you have to use JS for it (so if you have not learned it before, I think you should...)
CSS can apply properties on elements "selected" but only that.
If you want to get an information about an element (like whether it is hovered) and apply a propertie to another element depending on the information (like visibility:hidden), you have to use JavaScript.
i have a tinymce editor instance and by default the tooltips are positioned to the south of the object (buttons menuitems etc)
i would like to position them to the right (or east)
i can see in the css for the tooltips that there appear to be classes that operate this behaviour, but i simply can not work out how to use them
default css snippet
.mce-tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-nw .mce-tooltip-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-ne .mce-tooltip-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-s .mce-tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-sw .mce-tooltip-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-se .mce-tooltip-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-e
can you see things like .mce-tooltip-ne in there - i assume that controls placing the tooltip to the north east
but i literally cant even make it happen
please help
i couldnt work out how to call the styles with the compass bearings
so i just shifted the tooltip using a couple of styles in the default tooltip class
highlighted in bold below
.mce-tooltip{position:absolute;left:100px;padding:5px;opacity:.8;filter:alpha(opacity=80);zoom:1}
.mce-tooltip-inner{ position:relative;top:-10px; font-size:11px;background-color:#000;color:#fff; min-width:400;max-width:600px; padding:5px 8px 4px 8px;text-align:center;white-space:normal}
this is from /tinymce/skins/lightgray/skin.min.css
the additions to the code pushed the tooltip to the right enough for what needed
If you are referring to the tooltip shown in image above, that is simply a native browser tooltip displaying the title attribute of the anchor tag containing the icon.
Here's the HTML for that button:
<a title="Bold (Ctrl+B)"
onclick="return false;"
onmousedown="return false;"
class="mceButton mceButtonEnabled mce_bold"
href="javascript:;" id="story_content_bold">
<span class="mceIcon mce_bold"></span>
</a>
Based on the above, the short answer to your question is: no you cannot change the position of the browser's native tooltip.
However there may be ways to manipulate the way the tooltips are displayed, which will require you to make changes to tinyMCE source code.
One idea is to use another attribute to contain the title text. This way you can use CSS to style the tooltip based on the alternative attribute rather than having the native browser tooltip.
For example you can use data-alt attribute:
<a data-alt="Bold (Ctrl+B)" class="specialtooltip"></a>
Then use CSS to style it as tooltip:
a.specialtooltip[data-alt]:hover:after {
/* style to achieve tooltip effect */
}
Please refer to this fiddle for example: http://jsfiddle.net/va3jn2qy/1/
I have written the following html code:
<img src="myImages/defaultImages/myPic.jpg" title="myFirstValue: 'DescriptionOfMyFirstValue',
mySecondValue: 'DescriptionOfMySecondValue',
myThirdValue: 'DescriptionOfMyThirdValue'" />
That creates a nice tooltip with some linebreaks, but my area, in which the tooltiptext is visible, is too small. How can i create a much bigger area for my tooltip?
Thanks !
It is currently not possible to format a tooltip. An alternative solution is to use one of the many open source projects that allow for custom HTML based tooltips and then modify their content.
These are some common solutions.
jTip
jQuery Tooltip
Suppose I want to replace a link > with a fancy image arrow. For that I want to use a CSS sprite.
In many articles, for example in a recent (2012) article in Smashing Magazine, the recommended method is something like this:
HTML:
>
CSS: hide text and specify sprite as background
However this method is problematic concerning accessibility: If images are disabled but CSS is interpreted, then the above link will be invisible.
Interestingly, I found an old (2010) article by Paciello Group that proposes what looks like a good solution. The idea is to place a <span> next to the text to be replaced. The <span> has a background image and is positioned on top of the text. If the image loads, it replaces the text, otherwise the text is still visible.
Why is this method not widely employed? Are there issues with that solution?
The main disadvantage is showing the text to users with no special accessibility needs, before your CSS sprite loads. In terms of code, it is also perhaps not as semantically clean as using an aria-label solution (explained below).
You could consider using an ARIA label for the element:
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
I quickly checked how Gmail and Facebook approach this problem (buttons without text):
In Gmail the 'previous' button has an aria-label of 'Older'
in Facebook the 'cog' icon in top right has some text 'Account Settings' indented -5000em
I'm trying to get the black x mark to display on the same line as the second green rectangle. I tried using display: inline, but it still won't show up on the same line. Can someone help please?
http://jsfiddle.net/a4Cg4/1/
In the HTML code, moving the mark inside the element where it'll float is mandatory, if I understood what you want to achieve.
Then you use deprecated attribute align="center" and it complicates everything when trying to position the mark... Nonetheless here's a fiddle: http://jsfiddle.net/PhilippeVay/a4Cg4/5/
(modified CSS is at the top, first and second rule)
Unrelated to your problem but still: every HTML img needs an alt attribute, even if it's empty for decorative images (or when context like surrounding text already says what the image represent). I added it to the HTML code.