Here's the jQueryTools demo page on how to use their tooltips: http://flowplayer.org/tools/demos/tooltip/any-html.html
Basically, if you want to have a tooltip that contains HTML, you have to put that HTML in a div and place it directly after the trigger element like so:
<a href="http://www.stackoverflow.com" id="link1">
<div class="tooltip">
<img src="img/SOicon.png">stack<span style="font-weight:bold">overflow</span>
</div>
But my trigger element isn't <a href="http://www.stackoverflow.com" id="link1">. It's an <li>, and my guess is that I can't put anything other than an <li> in the parent <ul>. In other words, I can't place the after the trigger element like I'm supposed to.
I've come up with a way to fix this (scrapping the unordered list with floated <li>s and switching over to floated divs) but figured I should probably consult the experts (you guys, of course!) before I got started on fixing the problem.
How would you guys fix this?
It's no problem to use another element outside your structure as tooltip target !
<ul id="mylist">
<li title="List Point 1">List Point 1</li>
<li title="List Point 2">List Point 2</li>
<li title="List Point 3">List Point 3</li>
</ul>
<!-- many other HTML ELements -->
<div id="mylist_tooltip"></div>
At the end put in your jQuery's ready() :
jQuery("#mylist li").tooltip({
// target div
tip: '#mylist_tooltip'
});
Read more in the docu ;-)
Related
I have a menu structure I built in HTML+CSS that I would like to incorporate into a WordPress menu, but I am new to extending the Walker class and was wondering if someone could show me an example of how it might work. The code I would like to output is below:
<!-- Menu Start -->
<nav class="collapse navbar-collapse menu">
<ul class="nav navbar-nav sf-menu">
<li><a id="current" href="front-page.php">Current Page</a></li>
<li>Top Level Menu <span class="sf-sub-indicator"><i class="fa fa-angle-down"></i></span>
<ul>
<li>Child Link</li>
</ul>
</li>
<li>Another Link No Children</li>
</ul>
</nav>
<!-- Menu End -->
The nav and ul tags wrap the entire menu and do not need repeating.
The li for a single page without any child pages just needs an anchor tag inside of a bare li, except if the page is current, and add the appropriate id to the a tag.
If there is a parent item with children, display the parent link first with a "sf-with-ul" class on the a tag, then make another ul group with its li children have the same class as well.
Could anyone point me in the right direction here on how to accomplish this? Thank you.
Unfortunately I don't have a massive amount of time to write an example right now but I can send you the article that goes into decent detail on how to create walkers in WordPress.
How to add custom HTML to wp_nav_menu?
Using this as a guide it should be possible to add classes where you want to add them and structure your menu. If not I can try and whip an example up later.
I am creating a dynamic navigation list and I want to be able to highlight the page from that list that the user is currently browsing without having to explicitly add the style into a CSS document. For instance,
<div class="check-me">
<ul class="any-class">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
Essentially, I want to be able to replace the "any-class" with another class, one that appears on an LI element within the "any-class" UL.
<div class="check-me">
<ul class="shirts">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
I cannot append an "active" class to any LI due to limitations, so I wonder if this is possible using a wildcard CSS selector to use inside div.check-me to highlight anything that shares the same class with the UL. I hope I've been clear enough.
I'm completely new to HTML and CSS, so please bear with me.
I want to change the color of an individual list item in an ordered list, but I don't want the list number to change style. I also need to do this within the one html-document -- no separate CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Test-page </title>
</head>
<body>
<h1> An html-file </h1>
<ol>
<li> Item 1 </li>
<li style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>
</body>
</html>
The only thing I can think of to solve this using inline styling, is:
<ol>
<li> Item 1 </li>
<li><p style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>
But the list items will appear to be separate paragraphs.
I don't want to use the font-tag, and I want to use HTML5. I want it to be as short as possible, in one file, therefore inline styling.
Any CSS rule that you set on a li element also applies to the list item marker (bullet, number). This is inconvenient, and CSS still lacks any way to style the list marker separately.
So your approach of using something like <li><p style="color:blue"> Item 2 </li> is the workaround you need to use, but when selecting the added inner element, you need to consider the consequences. A p element has default top and bottom margin, so using it, you would need to remove them here:
<li><p style="color:blue; margin:0"> Item 2 </li>
A simpler way is to use div instead of p, since div is a semantically emply block-level container element, which causes no change in default rendering except that its content starts on a fresh line and the content after it starts on a fresh line, which happens here anyway due to the list markup. So:
<li><div style="color:blue"> Item 2</div></li>
Instead of div, you can use span, if there is only inline (phrase-level) content. But div is more flexible, as it allows elements like inner lists, tables, etc.
LIke this
demo
css
ol li span{
color:blue;
}
Try using the span tag in place of p. And don't forget to close the tags properly:
<ol>
<li><span style="color:blue">Item 2</span></li>
</ol>
All the best.
<li><span style="color:blue">Item</span>2</li>
Ran into this 'funny' issue today. I have an asp.net mvc application, with a twitter bootstrap design template, which up until now has been working fine. However, when I added some #Scripts.Render("...") statements to the top of my view (Not shared layout file, but view) it seems to alter my layout!
View:
#Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
#Scripts.Render("~/signalr/hubs")
#Scripts.Render("~/Scripts/Stimline/connector.js")
<div class="span12">
<legend>Fleet List</legend>
<div class="row-fluid">
...
</div>
</div>
Whenever the three script statements at the top is added to my .cshtml file, it seems to move the entire div-part over to the right, so that it aligns with the edge of my browser. Removing the statements again causes it to go back to normal, adding the margin supposed to be there by default from bootstrap.
I have not done any changes to the bootstrap css.
Has anybody seen this, or at least something similar, before?
Here's how it looks with the #Render.Scripts statement:
And here's without it:
If you use the fixed header bar as a reference for right edge, you'll see that the table is aligned all the way to the right in one image, and correctly "spaced" from the edge in the other.
I recently ran into a similar issue where I was float li elements for a menu. I had each element on it's own line in the html, so a space was rendered between each item.
<ul>
<li style="float:left">Item 1</li>
<li style="float:left">Item 2</li>
<li style="float:left">Item 3</li>
</ul>
changed to
<ul>
<li style="float:left">Item 1</li><li style="float:left">Item 2</li><li style="float:left">Item 3</li>
</ul>
In your situation moving the script to the bottom of the page would be best to follow other best practices, but you could also remove the whitespace to get the same result.
I'm aware that <span> tag is an inline element while <li> is a block element. However, we have a tooltip that uses a <span> tag and we'd like to make the text inside that tooltip into a list. However, putting <ul><li> inside span doesn't work in all browsers (and it's invalid).
This is the HTML code:
<a class='tooltip'>Text<span>Text that we want to become a list</span></a>
Is there a possible work around?
Although I would not worry to much about invalid code in this instance, given that you know about it, if the ul li is breaking in some of the code, you could do the following, which is also probably invalid:
<a class='tooltip'>Text<span>List item 1<br />
List item 2<br />
List item 3</span></a>
I think the technical answer you could be looking for is that the tooltip text should go inside the title attribute of the anchor tag itself.
Text
It's still not "beautiful" but semantically it's closer to what you're looking for. Plus you can use javascript to pluck that title value from the anchor tag to do something prettier with.
Just use a class:
<ul class='melikenachos'>
</ul>
Try this. Chances are if you want to put a block element inside an inline element, you really want them both to be block elements:
<a class='tooltip' style="display: block;">Text
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</a>
Or for all your tooltips:
a.tooltip{
display: block;
}