How to change bootstrap tour arrow

Question

I use bootstrap tour but i dont no how to change the arrow to top.

Anyone can tech me to change the arrow to top?

As per screenshot below.

This is script for bootstrap tour.

var tour = new Tour({
    placement: "top",
    storage: false,
  steps: [
  {
    element: "#revision",
    title: "TEST",
    content: "TEST. . . "
  }
]});

tour.init();
tour.start();

pigletfly · Answer 1 · 2015-06-24T04:24:14.173

1

change your div class to popover tour-tour fade bottom in,change your placement top to bottom

edited Jun 24 '15 at 04:24

answered Jun 24 '15 at 02:05

pigletfly

1,051
1
16
32

Please expand you answer and add more details. – Ram Jun 24 '15 at 04:05

Tom Baum · Answer 2 · 2016-06-01T13:04:33.920

1

Just add the 'placement' property like that:

steps: [
{
    element: "#revision",
    title: "TEST",
    content: "TEST. . . "
    placement: top
}

]

edited Jun 01 '16 at 13:04

answered May 31 '16 at 11:49

Tom Baum

23
5

if i want to hide the arrow icon what can i do? – Ambal Mani May 22 '18 at 13:31

score -1 · Answer 3 · answered Jun 24 '15 at 02:02

-1

This div gets created <div class="arrow"></div> try editing the CSS on that class in the bootstrap.css file.

answered Jun 24 '15 at 02:02

Joshua Terrill

1,995
5
21
40

How to change bootstrap tour arrow

3 Answers3