javascript - tooltips - tooltip input bootstrap
Botón Bootstrap de Twitter, haga clic para alternar la sección expandir/colapsar el texto sobre el botón (5)
Basado en el documento
<div class="row">
<div class="span4 collapse-group">
<h2>Heading</h2>
<p class="collapse">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
$(''.row .btn'').on(''click'', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest(''.collapse-group'').find(''.collapse'');
$collapse.collapse(''toggle'');
});
Recientemente me he encontrado con bootstrap y estoy trabajando para extender el ejemplo de héroe. Deseo agregar el siguiente comportamiento a mi página:
Cuando se hace clic en un botón (es decir, un elemento con el selector ''.row .btn''), quiero poder alternar entre expandir / contraer la parte del texto sobre el botón.
Así es como se ve el HTML:
<html>
<head>
<title>Test Page</title>
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-fixed-top">
</div>
<div class="container">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>Blah, blah.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
Puedo hackear esto usando jQuery, pero tal vez hay una forma de hacerlo a la manera de Bootstrap. - es decir, usando la API de Bootstrap?
Es posible hacer esto sin usar código JS adicional utilizando los atributos de colapso de datos y destino de datos en el enlace.
p.ej
<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details »</a>
Profundizando un poco más en la respuesta de Taylor Gautier (lo siento, no tengo la reputación suficiente para agregar un comentario), respondía a Dean Richardson sobre cómo hacer lo que quería, sin ningún código JS adicional. Pure CSS.
Deberías reemplazar su .btn con lo siguiente:
<a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails"></a>
Y agrega un pequeño CSS para cuando se muestre el contenido:
.in.collapse+a.btn.showdetails:before {
content:''Hide details «'';
}
.collapse+a.btn.showdetails:before {
content:''Show details »'';
}
Quería un contenedor "expandir / colapsar" con un botón más y menos para abrirlo y cerrarlo. Esto usa el evento de arranque estándar y tiene animación. Esto es BS3.
HTML:
<button id="button" type="button" class="btn btn-primary"
data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-collapse-down"></span> Show
</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
JS:
$(function(){
$(''#demo'').on(''hide.bs.collapse'', function () {
$(''#button'').html(''<span class="glyphicon glyphicon-collapse-down"></span> Show'');
})
$(''#demo'').on(''show.bs.collapse'', function () {
$(''#button'').html(''<span class="glyphicon glyphicon-collapse-up"></span> Hide'');
})
})
Ejemplo:
html:
<h4 data-toggle-selector="#me">toggle</h4>
<div id="me">content here</div>
js:
$(function () {
$(''[data-toggle-selector]'').on(''click'',function () {
$($(this).data(''toggle-selector'')).toggle(300);
})
})