tooltip con mootols lo vorrei in jquery

**lucaeffe** · 27-06-2010, 19:27

http://www.francescomugnai.com/

L'effetto che si trova giu in basso nei tre riqaudri mi pare sia realizzato con la libreria mootools.
Sarebbe possibile trovarlo in Jquery?
Dove?

**mxa** · 27-06-2010, 22:59

Questo fatto con JQuery tools ci somiglia molto: http://flowplayer.org/tools/tooltip/index.html

**lucaeffe** · 28-06-2010, 09:26

Non avrei voluto niente di meglio!

)

**lucaeffe** · 10-07-2010, 16:03

Mi aiutersti a capire come potrei implementarlo nella mia situazione?
Non riesco ad adattarlo alla struttura del mio sito

Questo è il mio codice .html

codice:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lucaeffe</title>



    <script type="text/javascript">
        var GB_ROOT_DIR = "./greybox/";
    </script>
    
    <script type="text/javascript"  src="greybox/AJS.js"></script>
    
    <script type="text/javascript"  src="greybox/AJS_fx.js"></script>
    
    <script type="text/javascript"  src="greybox/gb_scripts.js"></script>
    
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
    
    <script type="text/javascript" src="../static_files/help.js"></script>
    
    <link  href="static_files/help.css" rel="stylesheet" type="text/css" media="all" />




<link href="index.CSS" rel="stylesheet" type="text/css" />
<link href="widget.css" type="text/css" rel="stylesheet" />
<link href="form_footer.css" rel="stylesheet" type="text/css" media="screen"/>








<script src="blogger.js"></script>
<script src="http[Luca_effe].json?callback=twitterCallback&amp;count=1"></script>

	
	<meta http-equiv="Content-Language" content="en-us">

	<meta name="author" content="Engage Interactive">

	<meta http-equiv="X-UA-Compatible" content="IE=8">
    
    
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    
   <script type="text/javascript">
      $(document).ready(function(){

	$(".menu2 a").append("");
	
	$(".menu2 a").hover(function() {
		$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
		var hoverText = $(this).attr("title");
	    $(this).find("em").text(hoverText);
	}, function() {
		$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
	});


});
</script>


	<script  src="jquery.tools.min.js"></script>


<style>

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(tooltip/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}

/* style the trigger elements */
#dyna img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

</style>


<!--[if IE]>
<style type="text/css">




#navigation_quick li a:hover
{
	background-image:url(IMAGE/navigation2.png);
	background-repeat:no-repeat;
	margin:5px 25px 0 35px ;
	position:relative;
	outline:none;
}

#navigation_quick {
	position:absolute;
	left:610px;
	top:330px;
	display: block;
	width: 555px;
	height: 93px;
	background:url(IMAGE/navigation2.png) left top no-repeat;

}	


#navigation {
	left:400px;
	top:-490px;
    width:500px;


}


#navigation li a:hover
{
	margin:0 0 0 45px;
}


</style>
<![endif]-->





</head>

<body>




<div id="header"></div>

<div id="quick2">
<ul class="navigation_quick">


			<li class="home">
			<li class="work">
			<li class="contact">
            <li class="curriculum">
           
            
[/list]
</div>

<script>

// initialize tooltip
$("#dyna img[title]").tooltip({

   // tweak the position
   offset: [10, 2],

   // use the "slide" effect
   effect: 'slide'

// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
</script>





<style>

/* override the arrow image of the tooltip */
.tooltip.bottom {
	background: url(tooltip/black_arrow.png);
	padding-top:40px;
	height:55px;
}

.tooltip.bottom {
	background: url(tooltip/black_arrow.png);
}
</style>


 <div id="container">



</script>

<h4>Example rendered:</h4>
<script>
var page_set = [{'caption': 'Google', 'url': 'http://lucaeffe.com/gallery/burn_after.html'},
    {'caption': 'Yahoo', 'url': 'http://yahoo.com/'},
    {'caption': 'Yahoo', 'url': 'http://yahoo.com/'}];
</script>





</div>


</div>

				




  <div id="footer">
  
  <div id="twitter_div">
<div id="rett"></div>
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list">[/list]
</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Luca_effe.json?callback=twitterCallback2&amp;count=1"></script>

  

  
<div id="quick">
<ul class="navigation_quick">
			<li class="home">
			<li class="work">
			<li class="contact">
            <li class="curriculum">
            <li class="pdf">
[/list]
<ul class="social">
			<li class="facebook">
            <li class="twitter">
            <li class="flickr">
            <li class="behance">
            

[/list]

</div>


</div>
</body>
</html>

Questo è la parte di codice dove vorrei poterci implementare lo script.

codice:

<div id="header"></div>

<div id="quick2">
<ul class="navigation_quick">



			<li class="home">
			<li class="work">
			<li class="contact">
            <li class="curriculum">
            
            
[/list]
</div>

Discussione: tooltip con mootols lo vorrei in jquery

Strumenti discussione

Ricerca discussione

Visualizza

tooltip con mootols lo vorrei in jquery

Permessi di invio